<!doctype html>
<html>
    <head>

        <title>jsPlumb 1.7.4 demo - jQuery</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
        <link rel="stylesheet" href="../../css/jsplumb.css">
        <link rel="stylesheet" href="demo.css">
    </head>
    <body data-demo-id="perimeterAnchors" data-library="dom">
        <div id="headerWrapper">
            <div id="header">
                <div class="logo"><img src="../../logo-bw.png"></div>
                <div class="menu">
                    <a href="http://localhost:4567">DOCS</a>
                    <a href="../../apidocs">API</a>
                    <a href="../../tests/index.html">TESTS</a>
                    <a href="mailto:hello@jsplumbtoolkit.com">CONTACT</a>
                    <a href="http://github.com/sporritt/jsplumb/">GITHUB</a>
                    <a href="https://groups.google.com/forum/?fromgroups#!forum/jsplumb">DISCUSS</a>
                    <a href="https://github.com/sporritt/jsPlumb/issues">ISSUES</a>
                </div>
            </div>
        </div>

        <iframe id="like" src="http://www.facebook.com/widgets/like.php?href=http://jsplumb.com&amp;layout=button_count"></iframe>

        <div id="retweet_button">
            <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://jsplumb.org" data-text="jsPlumb - visually connect DOM elements." data-count="horizontal" data-via="jsPlumb">Tweet</a>
            <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        </div>

        <div id="main">
            <!-- demo -->
            <div class="demo perimeter-demo" id="perimeter-demo">
                <div class="explanation">
                    <i class="fa fa-info-circle"></i>
                    <h4>List items</h4>
                    <p>Demonstrates how to connect items in two lists</p>
                    <p>This demonstration uses jsPlumb 1.7.4.  No external dependencies are required.</p>
                </div>
                <div class="list list-lhs">
                    <ul>
                        <li>item one</li>
                        <li>item two</li>
                        <li>item three</li>
                        <li>item four</li>
                        <li>item five</li>
                        <li>item six</li>
                        <li>item seven</li>
                        <li>item eight</li>
                        <li>item nine</li>
                        <li>item ten</li>
                        <li>item eleven</li>
                        <li>item twelve</li>
                        <li>item thirteen</li>
                        <li>item fourteen</li>
                        <li>item fifteen</li>
                        <li>item sixteen</li>
                        <li>item seventeen</li>
                        <li>item eighteen</li>
                        <li>item nineteen</li>
                        <li>item twenty</li>
                        <li>item twenty one</li>
                        <li>item twenty two</li>
                        <li>item twenty three</li>
                        <li>item twenty four</li>
                        <li>item twenty five</li>
                        <li>item twenty six</li>
                        <li>item twenty seven</li>
                        <li>item twenty eight</li>
                        <li>item twenty nine</li>
                        <li>item thirty</li>
                        <li>item thirty one</li>
                        <li>item thirty two</li>
                        <li>item thirty three</li>
                        <li>item thirty four</li>
                    </ul>
                </div>
                <div class="list list-rhs">
                    <ul>
                        <li>item one</li>
                        <li>item two</li>
                        <li>item three</li>
                        <li>item four</li>
                        <li>item five</li>
                        <li>item six</li>
                        <li>item seven</li>
                        <li>item eight</li>
                        <li>item nine</li>
                        <li>item ten</li>
                        <li>item eleven</li>
                        <li>item twelve</li>
                        <li>item thirteen</li>
                        <li>item fourteen</li>
                        <li>item fifteen</li>
                        <li>item sixteen</li>
                        <li>item seventeen</li>
                        <li>item eighteen</li>
                        <li>item nineteen</li>
                        <li>item twenty</li>
                        <li>item twenty one</li>
                        <li>item twenty two</li>
                        <li>item twenty three</li>
                        <li>item twenty four</li>
                        <li>item twenty five</li>
                        <li>item twenty six</li>
                        <li>item twenty seven</li>
                        <li>item twenty eight</li>
                        <li>item twenty nine</li>
                        <li>item thirty</li>
                        <li>item thirty one</li>
                        <li>item thirty two</li>
                        <li>item thirty three</li>
                        <li>item thirty four</li>
                    </ul>
                </div>

            </div>
            <!-- /demo -->
        </div>

        <!-- JS -->
        <!-- support lib for bezier stuff -->
        <script src="../../node_modules/jsbezier/js/jsbezier.js"></script>
        <!-- event adapter -->
		<script src="../../node_modules/mottle/js/mottle.js"></script>
		<!-- geometry functions -->
        <script src="../../node_modules/biltong/src/biltong.js"></script>
		<!-- drag -->
        <script src="../../lib/katavorio-0.8.js"></script>
        <!-- jsplumb util -->
        <script src="../../src/util.js"></script>
        <script src="../../src/browser-util.js"></script>
        <!-- base DOM adapter -->
        <script src="../../src/dom-adapter.js"></script>
        <!-- main jsplumb engine -->
        <script src="../../src/jsPlumb.js"></script>
        <!-- endpoint -->
        <script src="../../src/endpoint.js"></script>
        <!-- connection -->
        <script src="../../src/connection.js"></script>
        <!-- anchors -->
        <script src="../../src/anchors.js"></script>
        <!-- connectors, endpoint and overlays  -->
        <script src="../../src/defaults.js"></script>
        <!-- bezier connectors -->
        <script src="../../src/connectors-bezier.js"></script>
        <!-- state machine connectors -->
        <script src="../../src/connectors-statemachine.js"></script>
        <!-- flowchart connectors -->
        <script src="../../src/connectors-flowchart.js"></script>\n<script src="../../src/connectors-straight.js"></script>
        <script src="../../src/connector-editors.js"></script>
        <!-- SVG renderer -->
        <script src="../../src/renderers-svg.js"></script>

        <!-- common adapter -->
        <script src="../../src/base-library-adapter.js"></script>
        <!-- no library jsPlumb adapter -->
        <script src="../../src/dom.jsPlumb.js"></script>
        <!-- /JS -->

		<!--  demo code -->
		<script src="demo.js"></script>

        <script src="../demo-list.js"></script>

    </body>
</html>
